import React from 'react';
import { Button, Alert } from 'antd';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaDialog, WeaTable, WeaAvatar, WeaInputSearch, WeaLocaleProvider } from 'ecCom';
import Loading from './Loading';
import './index.less';
const getLabel = WeaLocaleProvider.getLabel;
const columns = [{
  title: getLabel('30042','人员') ,
  dataIndex: 'name',
  render: (text, record ) => (
      <div className='wea-edc-no-write-list'>
        <div className='avatar'>
        <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@jyvd9x@${record.id}`} userId={record.id} isGroup={false} />
        </div>
        <span>
          <span>{record.lastname}</span>
          <span className='person-info-detail'>{record.departmentName}</span>
        </span>
      </div>
    )
  }];

@inject('edcSetGroupNoWriteStore', 'edcAddShareStore')
@observer
export default class SetGroupNoWriteDialog extends React.Component {
  constructor(props) {
    super(props);

    this.store = props.edcSetGroupNoWriteStore;
  }

  getData = () => {
    const { filterGroupPerson } = this.store;
    const data = [];

    toJS(filterGroupPerson).map(person => {
      data.push({
        key: person.id,
        id: person.id,
        departmentName: person.departmentName,
        lastname: person.lastname,
      });
    });

    return data;
  }

  onSure = () => {
    const { onSure } = this.store;
    const { onCancel, edcAddShareStore } = this.props;
    const { init, appid } = edcAddShareStore;

    onSure().then(() => {
      onCancel();
      init(appid);
    });
  }

  onSearch = value => {
    const { onSearch } = this.store;

    onSearch(value);
  }

  render () {
    const { visible, onCancel } = this.props;
    const { filterGroupPerson, noWritePerson, onPersonChange, hasInit } = this.store;
    const rowSelection = {
      onChange(selectedRowKeysAllPages, selectedRows) {
        onPersonChange(selectedRowKeysAllPages, selectedRows);
      },
      selectedRowKeysAllPages: toJS(noWritePerson)
    };
    const buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c5zn1k@onOk`} type="primary" onClick={this.onSure}>
        {getLabel('826','确定')}
      </Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h7bh3y@cancel`} type="ghost" onClick={onCancel}>
        {getLabel('31129','取消')}
      </Button>
    ];

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@vax2ho`}
        title={getLabel('528009','设置不需填写的人员')}
        className='wea-edc-setgroup-nowrite'
        icon={"icon-coms02-Data-center"}
        iconBgcolor = "#1a57a0"
        hasScroll
        confirmLoading={true}
        visible={visible}
        buttons={buttons}
        onCancel={onCancel}
        style={{ width: 800, height: 750 }}
      >
        <div className='content'>
          <Alert ecId={`${this && this.props && this.props.ecId || ''}_Alert@t9walh`} message={getLabel('523114','选择群组中不用填写的人员') } type="warning" showIcon />
          {
            hasInit ?
            <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@b3isuk`}>
              <div className='wea-edc-search-person' >
                <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@jawajm`}
                  onSearch={this.onSearch}
                />
              </div>
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@byo5w8`}
                rowSelection={rowSelection} 
                columns={columns} 
                dataSource={this.getData()}
                pagination={{
                  size: 'small',
                  total: filterGroupPerson.length,
                  showTotal: total => `${getLabel('18609','共')} ${total} ${getLabel('18256','条')}`
                }}
              />
            </React.Fragment> :
            <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@tvlp8o`} loading={true} content={getLabel('500408','加载中...') } />
          }
          </div>
      </WeaDialog>
    )
  }
}